<section py="8|12|16|24">
  <Container>
    <Grid col="1|2" gap="8|12|16" alignItems="center">
      <div>
        <p m="0" fontWeight="semibold" px="1">
          Marketing Tools
        </p>
        <h2 variant="heading.h2" mt="2" mb="0">
          Turn followers into customers.
        </h2>
        <p fontSize="xl|2xl" mt="2">
          Reach and grow your audience. We are here to help you.
        </p>
        <Grid display="inline-grid" col="2" gap="4" w="full|auto">
          <button variant="button.primary">Get Started</button>
          <button variant="button.link">Learn More</button>
        </Grid>
      </div>
      <form display="grid" col="1|repeat(2, auto)" gap="4" mt="4" w="full|auto">
        <div>
          <VisuallyHidden>
            <label htmlFor="form-01-name">Name</label>
          </VisuallyHidden>
          <input
            variant="input"
            variant="input"
            type="text"
            id="form-01-name"
            name="name"
            placeholder="Name"
          />
        </div>
        <div>
          <VisuallyHidden>
            <label htmlFor="form-01-email">Email</label>
          </VisuallyHidden>
          <input
            variant="input"
            type="email"
            id="form-01-email"
            name="email"
            placeholder="Email"
          />
        </div>
        <div>
          <VisuallyHidden>
            <label htmlFor="form-01-phone">Phone</label>
          </VisuallyHidden>
          <input
            variant="input"
            type="tel"
            id="form-01-phone"
            name="phone"
            placeholder="Phone"
          />
        </div>
        <div>
          <VisuallyHidden>
            <label htmlFor="form-01-subject">Subject</label>
          </VisuallyHidden>
          <select variant="select" id="form-01-subject" name="subject">
            <option value="">Select</option>
            <option value="one">Option One</option>
            <option value="two">Option Two</option>
          </select>
        </div>
        <div colStart="span 2">
          <VisuallyHidden>
            <label htmlFor="form-01-message">Message</label>
          </VisuallyHidden>
          <textarea
            variant="textarea"
            placeholder="Message"
            id="form-01-message"
            name="message"
            rows="5"
          />
        </div>
        <button type="submit" variant="button.primary" colStart="span 2">
          Send message
        </button>
      </form>
    </Grid>
  </Container>
</section>
